<template>
    <div id="searchBlog" class="tl-overflow-hidden">
        <el-container class="tl-margin-top-40 tl-margin-auto tl-width-70-percent">
            <el-main style="z-index: 100">
                <el-card class="tl-card-hover tl-margin-20-0 tl-border-radius-8" v-for="blog in blogList"
                         :key="blog.id">
                    <el-row>
                        <el-col :span="8">
                            <a class="tl-a" :href="`/blog/${blog.id}`" target="_blank">
                                <!-- <img src="http://qed2ietic.bkt.clouddn.com/image/bg.png" alt="">-->
                                <!--https://th.wallhaven.cc/small/ym/ymojgd.jpg-->
                                <img
                                    class="blog-img-1 tl-display-block tl-width-100-percent tl-border-radius-8 tl-box-shadow-mini"
                                    :src="blog.firstPicture ? blog.firstPicture : 'https://th.wallhaven.cc/small/ym/ymojgd.jpg'" alt="正在加载...">
                            </a>
                        </el-col>
                        <el-col style="display: block !important;" :offset="1" :span="15">
                            <div class="tl-font-30-px tl-text-shadow-mini">
                                <a class="tl-a" :href="`/blog/${blog.id}`" target="_blank">{{ blog.title }}</a>
                            </div>
                            <p class="tl-min-height-100 tl-text tl-color-block-6 tl-font-14-px">
                                {{ blog.description | processText(205) }}
                            </p>
                            <el-row class="tl-text-no-select tl-font-12-px" type="flex"
                                    align="middle">
                                <el-col class="tl-left-center" :span="12">
                                    <el-avatar :size="20" :src="blog.avatar"></el-avatar>
                                    <span class="tl-margin-0-5 tl-color-block-6">{{ blog.nickname }}</span>
                                    <i class="iconfont icon-calendar tl-font-10-px"></i>
                                    <span class="tl-margin-0-5 tl-color-block-6">
                                                {{ blog.createTime | dateFormat('yyyy-MM-dd') }}
                                            </span>
                                    <i class="iconfont icon-eye tl-font-10-px"></i>
                                    <span class="tl-margin-0-5 tl-color-block-6">{{ blog.views }}</span>
                                    <i class="iconfont icon-comment tl-font-10-px"></i>
                                    <span class="tl-margin-0-5 tl-color-block-6">1700</span>
                                </el-col>
                                <el-col style="display: block !important; text-align: right !important;"
                                        :span="12">
                                    <el-button v-for="type in blog.types" :key="type.id"
                                               class="tl-margin-5 tl-gradient-button tl-font-10-px"
                                               size="mini" type="primary" round>{{ type.name }}
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
                <!-- 分页  -->
                <el-pagination background class="tl-text-center tl-margin-30-0"
                               @current-change="handleCurrentChange"
                               :current-page="queryInfo.pageNum"
                               layout="total, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { list } from '@/api/blog/blog';

export default {
    name: 'SearchBlog',
    components: {},
    props: ['search'],
    data: function () {
        return {
            queryInfo: {
                query: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            blogList: []
        }
    },
    methods: {
        getBlogList: async function () {
            this.queryInfo.query = this.search
            const res = await list(this.queryInfo);
            console.log(res)
            if (res.code ^ 200) {
                return this.$message({ showClose: true, message: res.msg, type: 'error' });
            }
            this.$emit('update:search', '')
            if (!res.data.rows.length && (this.queryInfo.pageNum ^ 1)) {
                this.queryInfo.pageNum--;
                return await this.getBlogList();
            }
            this.blogList = res.data.rows;
            this.total = res.data.total;
        },
        handleCurrentChange (val) {
            console.log(`当前页: ${val}`);
        }
    },
    created: function () {
        console.log(this.search)
        this.getBlogList()
    }
}
</script>

<style lang='less' scoped>
::v-deep .el-pagination {
    .el-pagination__jump, .el-pagination__total {
        color: white !important;
    }
}
</style>
